<template>
  <div id="aside">
    <el-menu  @select="choseMenu" :collapse="$store.state.menu.menuCollapse">
      <el-menu-item index="仪表盘" @click="switchNav('/dashBoard')">
        <i class="el-icon-s-data"></i>
        <span slot="title">仪表盘</span>
      </el-menu-item>
      <el-submenu index="商品管理" >
        <template slot="title">
          <i class="el-icon-s-goods"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item index="商品列表" @click="switchNav('/itemLists', '商品管理')">商品管理</el-menu-item>
        <el-menu-item index="分类列表" @click="switchNav('/cateLists', '商品分类管理')">商品分类管理</el-menu-item>
        <el-menu-item index="增加商品" @click="switchNav('/itemAdd', '增加商品')">增加商品</el-menu-item>
      </el-submenu>
      <el-menu-item index="个人中心" @click="switchNav('/user', '个人中心')">
        <i class="el-icon-user-solid"></i>
        <span slot="title">个人中心</span>
      </el-menu-item>
      <el-menu-item index="设置" @click="switchNav('/setting', '设置')">
        <i class="el-icon-s-tools"></i>
        <span slot="title">设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 当前跳转的路由的名字
      menus: []
    }
  },
  methods: {
    choseMenu (current, menuNames) {
      // 导航切换事件
      this.$store.commit('menu/SET_MENU_INFO', menuNames)
    },
    switchNav (path, navName) {
      // 跳转路由
      this.$router.push(path)
      if (path === '/dashBoard') {
        // 如果去仪表盘不添加
        return false
      }
      // 增加 navTab
      this.$store.commit('menu/ADD_TABS', { label: navName, path })
    }
  }
}
</script>

<style lang="scss" scoped>
#aside{
  .el-menu{
    background-color: #304156;
  }
  ::v-deep .el-submenu__title{
    &:hover{
      background-color: rgb(30, 30, 30);
    }
    .el-icon-location,span{
      color:rgb(191,203,217);
    }
  }
  ::v-deep .el-menu--inline{
    background-color: rgb(51, 60, 68);
    .el-menu-item{
      color: rgb(191,203,217);
    }
    .el-menu-item:hover{
     color:rgb(191,203,217);
     background-color: rgb(29, 27, 27);
    }
  }
  ::v-deep .el-menu-item{
    i,span{
      color:rgb(191,203,217);
    }
    &:hover{
      background-color: rgb(30, 30, 30);
    }
  }
 ::v-deep li.el-menu-item.is-active {
   background-color: rgb(30, 30, 30);
 }
}
</style>
